import React, { memo } from 'react'
import Recommand from './recommand/Recommand'
import { Menu } from './ClassifySecondmenu.style'
import {useHistory} from 'react-router-dom'

function ClassifySecondmenu(props) {
    const {secondMenu,checkedIndex,classifyRecommand} = props
    // console.log(secondMenu)
    const history=useHistory()
    const gotoClassifyList=(type)=>{
        history.push(`/classifyList/${type}`)
    }
    return (
        <Menu>
            {(checkedIndex==0)&&<Recommand classifyRecommand={classifyRecommand} />}
            {
                secondMenu&&secondMenu.map((item,index)=>{
                    return (index>0 && checkedIndex>0)&&<div
                        key={index+'secondMenu'}
                        className={'item'+ (checkedIndex==index?' checked':'')}
                        >
                            <div className="menu_title">{item.type}</div>
                            <div className='submenu_container'>
                                {
                                    item.submenu.map((submenuitem,index)=>{
                                        return <div key={index+'submenuitem'} className='submenuitem' onClick={()=>gotoClassifyList(submenuitem.type)}>
                                            <img src={submenuitem.imgSrc} />
                                            <div>{submenuitem.type}</div>
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                })
            }
        </Menu>
    )
}

export default memo(ClassifySecondmenu)
